<template>
  <div class="home-header">
    <nav class="home-header-nav">
      <ul>
        <nav-item v-for="(item, index) in navTitle" :item="item" :key="index" :index="index">
        </nav-item>
      </ul>
    </nav>
  </div>
</template>

<script>
let NavItem = {
  props: ['item', 'index'],
  template: '<li>{{item}}</li>'
}
export default {
  name: 'Header',
  props: ['navTitle'],
  data () {
    return {
    }
  },
  components: {
    NavItem
  }
}
</script>

<style scoped>
.home-header-nav{
  width: 100%;
  height: 44px;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: rgba(0,206,209,1);
  color: rgba(255,255,255,0.9);
  font-size: 20px;
  border-radius: 0 0 3px 3px;
}
.home-header-nav > ul {
  height: 38px;
  margin-top: 6px;
  line-height: 38px;
}
.home-header-nav > ul > li{
  float: left;
  margin-left: 10px;
}
</style>
